Formularvalidierung mit Reacts `experimental_useFormStatus` meistern

Formulare sind das Fundament der Web-Interaktion. Von einer einfachen Newsletter-Anmeldung bis hin zu einer komplexen mehrstufigen Finanzanwendung sind sie der primäre Kanal, über den Benutzer mit unseren Anwendungen kommunizieren. Dennoch war die Verwaltung des Formularstatus in React jahrelang eine Quelle der Komplexität, des Boilerplates und der Abhängigkeitsermüdung. Wir haben mit kontrollierten Komponenten jongliert, mit Bibliotheken zur Statusverwaltung gekämpft und unzählige `onChange`-Handler geschrieben, alles im Streben nach einer nahtlosen und intuitiven Benutzererfahrung.

Das React-Team hat diesen grundlegenden Aspekt der Webentwicklung überdacht, was zur Einführung eines neuen, leistungsstarken Paradigmas geführt hat, das sich auf React Server Actions konzentriert. Dieses neue Modell, das auf den Prinzipien der progressiven Verbesserung aufbaut, zielt darauf ab, die Formularverarbeitung zu vereinfachen, indem die Logik näher an den Ort verschoben wird, an dem sie hingehört – oft den Server. Im Herzen dieser clientseitigen Revolution stehen zwei neue experimentelle Hooks: `useFormState` und der Star unserer heutigen Diskussion, `experimental_useFormStatus`.

Dieser umfassende Leitfaden nimmt Sie mit auf einen tiefen Einblick in den `experimental_useFormStatus`-Hook. Wir werden uns nicht nur die Syntax ansehen; wir werden das mentale Modell erforschen, das er ermöglicht: Statusbasierte Validierungslogik. Sie werden lernen, wie dieser Hook die Benutzeroberfläche vom Formularstatus entkoppelt, die Verwaltung von ausstehenden Zuständen vereinfacht und in Zusammenarbeit mit Server-Aktionen robuste, zugängliche und hochperformante Formulare erstellt, die sogar funktionieren, bevor das JavaScript geladen wird. Bereiten Sie sich darauf vor, alles zu überdenken, was Sie über das Erstellen von Formularen in React zu wissen glaubten.

Ein Paradigmenwechsel: Die Entwicklung von React-Formularen

Um die Innovation, die `useFormStatus` mit sich bringt, voll und ganz zu würdigen, müssen wir zuerst die Reise des Formularmanagements im React-Ökosystem verstehen. Dieser Kontext verdeutlicht die Probleme, die dieser neue Ansatz elegant löst.

Die alte Garde: Kontrollierte Komponenten und Bibliotheken von Drittanbietern

Jahrelang war der Standardansatz für Formulare in React das kontrollierte Komponentenmuster. Dies beinhaltet:

• Die Verwendung einer React-Statusvariablen (z. B. von `useState`), um den Wert jeder Formulareingabe zu speichern.
• Das Schreiben eines `onChange`-Handlers, um den Status bei jedem Tastendruck zu aktualisieren.
• Das Übergeben der Statusvariablen zurück an die `value`-Eigenschaft der Eingabe.

Obwohl dies React die volle Kontrolle über den Formularstatus gibt, führt es zu erheblichem Boilerplate-Code. Für ein Formular mit zehn Feldern benötigen Sie möglicherweise zehn Statusvariablen und zehn Handler-Funktionen. Die Verwaltung von Validierung, Fehlerstatus und Übermittlungsstatus erhöht die Komplexität noch weiter und führt häufig dazu, dass Entwickler komplizierte benutzerdefinierte Hooks erstellen oder auf umfassende Bibliotheken von Drittanbietern zurückgreifen.

Bibliotheken wie Formik und React Hook Form erlangten Bekanntheit, indem sie diese Komplexität abstrahierten. Sie bieten brillante Lösungen für die Statusverwaltung, Validierung und Leistungsoptimierung. Sie stellen jedoch eine weitere zu verwaltende Abhängigkeit dar und arbeiten oft vollständig auf der Clientseite, was zu doppelter Validierungslogik zwischen Frontend und Backend führen kann.

Die neue Ära: Progressive Verbesserung und Server-Aktionen

React Server Actions führen einen Paradigmenwechsel ein. Die Kernidee ist, auf dem Fundament der Webplattform aufzubauen: dem Standard-HTML-Element `

`. Ein Formular mit einer Server-Aktion funktioniert wie eine klassische HTML-Formularübermittlung – es kann perfekt funktionieren, selbst wenn JavaScript fehlschlägt oder deaktiviert ist. Dies ist das Wesen der progressiven Verbesserung.

Wenn JavaScript geladen wird, übernimmt React den Übermittlungsprozess des Formulars, verhindert ein vollständiges Neuladen der Seite und führt die Server-Aktion asynchron aus. Dies gibt uns das Beste aus beiden Welten: die Widerstandsfähigkeit server-gerenderter Anwendungen und die reichhaltige, interaktive Erfahrung einer Single-Page-Application (SPA).

Dieses Modell verschiebt die Quelle der Wahrheit für Geschäftslogik und Validierung zurück auf den Server (oder eine serverähnliche Umgebung). Der clientseitige Code wird einfacher und befasst sich hauptsächlich mit dem Rendern der Benutzeroberfläche basierend auf dem *Status* dieser Serverkommunikation. Genau hier kommt `useFormStatus` ins Spiel.

Unter der Haube: Was ist `experimental_useFormStatus`?

Der `experimental_useFormStatus`-Hook ist ein clientseitiges Tool, das Informationen über die letzte Übermittlung eines übergeordneten ``-Elements bereitstellt. Es ist ein schreibgeschützter Hook, der einer Komponente alles mitteilt, was sie über den Übermittlungsstatus des Formulars wissen muss, ohne dass Eigenschaften übergeben werden müssen.

Die Kernfunktionalität

Stellen Sie sich eine Schaltfläche zum Senden in einem großen Formular vor. Woher weiß diese Schaltfläche, wann das Formular gesendet wird? Traditionell müssten Sie eine Statusvariable wie `isSubmitting` über mehrere Komponentenebenen hinweg übergeben (Prop-Drilling). Mit `useFormStatus` kann die Schaltflächenkomponente diese Informationen selbst herausfinden.

Der Hook muss von einer Komponente aufgerufen werden, die innerhalb eines ``-Elements gerendert wird. Anschließend werden Statusinformationen über den Lebenszyklus dieses spezifischen Formulars bereitgestellt.

Anatomie des `useFormStatus`-Hooks

Wenn Sie `const status = useFormStatus()` aufrufen, erhalten Sie ein Objekt mit den folgenden Haupteigenschaften:

• `pending` (boolean): Dies ist die am häufigsten verwendete Eigenschaft. Sie ist `true`, wenn das übergeordnete Formular gerade gesendet wird, und `false` andernfalls. Es ist perfekt zum Deaktivieren von Schaltflächen, zum Anzeigen von Lade-Spinners oder zum Gestalten von ausstehenden Zuständen.
• `data` (FormData): Ein Objekt, das die `FormData`-Schnittstelle implementiert. Es enthält die Daten, die mit dem Formular gesendet wurden. Dies ist unglaublich nützlich für die Implementierung optimistischer UI-Updates – z. B. um den Kommentar eines Benutzers sofort nach dem Absenden in einer Liste anzuzeigen, selbst bevor der Server dessen Erstellung bestätigt hat.
• `method` (string): Die für die Formularübermittlung verwendete HTTP-Methode ('get' oder 'post').
• `action` (function): Ein Verweis auf die Server-Aktionsfunktion, die während der Übermittlung aufgerufen wurde.

Die goldene Regel: Ein Kind des ``

Eine wichtige Regel, an die man sich erinnern sollte, ist, dass eine Komponente, die `useFormStatus` verwendet, als Kind des ``-Elements gerendert werden muss, das sie verfolgt. Sie kann sich nicht in derselben Komponente befinden, die das ``-Tag selbst rendert, da sie auf den Kontext des Formulars zugreifen muss. Aus diesem Grund werden Sie fast immer Komponenten wie eine `` separat erstellt sehen, um die `useFormStatus`-Logik zu beherbergen.

Ein einfaches Beispiel: Die intelligente Schaltfläche zum Senden

Sehen wir uns den häufigsten Anwendungsfall in Aktion an. Anstelle einer Standardschaltfläche `` erstellen wir eine Komponente, die den Übermittlungsstatus des Formulars kennt.

Datei: SubmitButton.js

import { experimental_useFormStatus as useFormStatus } from 'react-dom'; export function SubmitButton() { const { pending } = useFormStatus(); return (

{pending ? 'Wird gesendet...' : 'Anmelden'} ); }

Datei: SignUpForm.js

import { SubmitButton } from './SubmitButton'; import { signUpAction } from './actions'; // Eine Server-Aktion export function SignUpForm() { return ( E-Mail:
); }

In diesem Beispiel ist die `SubmitButton` vollständig in sich geschlossen. Sie empfängt keine Eigenschaften. Sie verwendet `useFormStatus`, um zu wissen, wann das `SignUpForm` aussteht, und deaktiviert sich automatisch und ändert ihren Text. Dies ist ein leistungsstarkes Muster für die Entkopplung und das Erstellen wiederverwendbarer, formularbewusster Komponenten.

Das Herzstück der Sache: Statusbasierte Validierungslogik

Nun kommen wir zum Kernkonzept. `useFormStatus` ist nicht nur für Ladezustände; es ist ein wichtiger Ermöglicher einer anderen Art des Denkens über Validierung.

Definition von "Statusvalidierung"

Statusbasierte Validierung ist ein Muster, bei dem Validierungsfeedback dem Benutzer hauptsächlich als Reaktion auf einen Formularübermittlungsversuch übermittelt wird. Anstatt bei jedem Tastendruck (`onChange`) oder wenn ein Benutzer ein Feld verlässt (`onBlur`) zu validieren, wird die primäre Validierungslogik ausgeführt, wenn der Benutzer das Formular sendet. Das Ergebnis dieser Übermittlung – ihr *Status* (z. B. Erfolg, Validierungsfehler, Serverfehler) – wird dann verwendet, um die Benutzeroberfläche zu aktualisieren.

Dieser Ansatz stimmt perfekt mit React Server Actions überein. Die Server-Aktion wird zur einzigen Quelle der Wahrheit für die Validierung. Sie empfängt die Formulardaten, validiert sie anhand Ihrer Geschäftsregeln (z. B. "wird diese E-Mail bereits verwendet?") und gibt ein strukturiertes Statusobjekt zurück, das das Ergebnis anzeigt.

Die Rolle seines Partners: `experimental_useFormState`

`useFormStatus` sagt uns, *was* geschieht (ausstehend), aber es sagt uns nicht das *Ergebnis* dessen, was geschah. Dafür brauchen wir seinen Geschwister-Hook: `experimental_useFormState`.

`useFormState` ist ein Hook, der entwickelt wurde, um den Status basierend auf dem Ergebnis einer Formularaktion zu aktualisieren. Er nimmt die Aktionsfunktion und einen Anfangsstatus als Argumente entgegen und gibt einen neuen Status und eine umschlossene Aktionsfunktion zurück, die Sie an Ihr Formular übergeben können.

const [state, formAction] = useFormState(myAction, initialState);

• `state`: Diese enthält den Rückgabewert aus der letzten Ausführung von `myAction`. Hier erhalten wir unsere Fehlermeldungen.
• `formAction`: Dies ist eine neue Version Ihrer Aktion, die Sie an die `action`-Eigenschaft des `
  ` übergeben sollten. Wenn diese aufgerufen wird, wird die ursprüngliche Aktion ausgelöst und der `state` aktualisiert.

Der kombinierte Workflow: Vom Klick zum Feedback

So arbeiten `useFormState` und `useFormStatus` zusammen, um eine vollständige Validierungsschleife zu erstellen:

1. Erstes Rendern: Das Formular wird mit einem anfänglichen Status gerendert, der von `useFormState` bereitgestellt wird. Es werden keine Fehler angezeigt.
2. Benutzerübermittlung: Der Benutzer klickt auf die Schaltfläche zum Senden.
3. Ausstehender Status: Der `useFormStatus`-Hook in der Schaltfläche zum Senden meldet sofort `pending: true`. Die Schaltfläche wird deaktiviert und zeigt eine Lademeldung an.
4. Aktionsausführung: Die Server-Aktion (umschlossen von `useFormState`) wird mit den Formulardaten ausgeführt. Sie führt die Validierung durch.
5. Aktion gibt zurück: Die Aktion schlägt die Validierung fehl und gibt ein Statusobjekt zurück, z. B.:
   `{ message: "Validierung fehlgeschlagen", errors: { email: "Diese E-Mail wird bereits verwendet." } }`
6. Statusaktualisierung: `useFormState` empfängt diesen Rückgabewert und aktualisiert seine `state`-Variable. Dies löst ein erneutes Rendern der Formular-Komponente aus.
7. UI-Feedback: Das Formular wird erneut gerendert. Der `pending`-Status von `useFormStatus` wird zu `false`. Die Komponente kann jetzt die `state.errors.email` lesen und die Fehlermeldung neben dem E-Mail-Eingabefeld anzeigen.

Dieser gesamte Ablauf liefert dem Benutzer klares, serverautoritatives Feedback, das vollständig vom Übermittlungsstatus und -ergebnis gesteuert wird.

Praktische Meisterklasse: Erstellen eines Mehrfeld-Registrierungsformulars

Lassen Sie uns diese Konzepte festigen, indem wir ein vollständiges Registrierungsformular im Produktionsstil erstellen. Wir verwenden eine Server-Aktion für die Validierung und sowohl `useFormState` als auch `useFormStatus`, um eine großartige Benutzererfahrung zu schaffen.

Schritt 1: Definieren der Server-Aktion mit Validierung

Zuerst benötigen wir unsere Server-Aktion. Für eine robuste Validierung verwenden wir die beliebte Bibliothek Zod. Diese Aktion wird sich in einer separaten Datei befinden, die mit der Direktive `'use server';` gekennzeichnet ist, wenn Sie ein Framework wie Next.js verwenden.

Datei: actions/authActions.js

'use server'; import { z } from 'zod'; // Definieren Sie das Validierungsschema const registerSchema = z.object({ username: z.string().min(3, 'Der Benutzername muss mindestens 3 Zeichen lang sein.'), email: z.string().email('Bitte geben Sie eine gültige E-Mail-Adresse ein.'), password: z.string().min(8, 'Das Passwort muss mindestens 8 Zeichen lang sein.'), }); // Definieren Sie den Anfangszustand für unser Formular export const initialState = { message: '', errors: {}, }; export async function registerUser(prevState, formData) { // 1. Validieren Sie die Formulardaten const validatedFields = registerSchema.safeParse( Object.fromEntries(formData.entries()) ); // 2. Wenn die Validierung fehlschlägt, geben Sie die Fehler zurück if (!validatedFields.success) { return { message: 'Validierung fehlgeschlagen. Bitte überprüfen Sie die Felder.', errors: validatedFields.error.flatten().fieldErrors, }; } // 3. (Simulieren) Überprüfen Sie, ob der Benutzer bereits in der Datenbank existiert // In einer realen App würden Sie hier Ihre Datenbank abfragen. if (validatedFields.data.email === 'user@example.com') { return { message: 'Registrierung fehlgeschlagen.', errors: { email: ['Diese E-Mail ist bereits registriert.'] }, }; } // 4. (Simulieren) Erstellen Sie den Benutzer console.log('Erstelle Benutzer:', validatedFields.data); // 5. Geben Sie einen Erfolgsstatus zurück // In einer realen App könnten Sie hier mit `redirect()` von 'next/navigation' umleiten return { message: 'Benutzer erfolgreich registriert!', errors: {}, }; }

Diese Server-Aktion ist das Gehirn unseres Formulars. Sie ist in sich geschlossen, sicher und stellt eine klare Datenstruktur für Erfolgs- und Fehlerzustände bereit.

Schritt 2: Erstellen wiederverwendbarer, statusbewusster Komponenten

Um unsere Hauptformular-Komponente sauber zu halten, erstellen wir dedizierte Komponenten für unsere Eingaben und die Schaltfläche zum Senden.

Datei: components/SubmitButton.js

'use client'; import { experimental_useFormStatus as useFormStatus } from 'react-dom'; export function SubmitButton({ label }) { const { pending } = useFormStatus(); return ( {pending ? 'Wird verarbeitet...' : label} ); }

Beachten Sie die Verwendung von `aria-disabled={pending}`. Dies ist eine wichtige Barrierefreiheitspraxis, die sicherstellt, dass Screenreader den deaktivierten Zustand korrekt ankündigen.

Schritt 3: Zusammenstellen des Hauptformulars mit `useFormState`

Bringen wir jetzt alles in unserer Hauptformular-Komponente zusammen. Wir verwenden `useFormState`, um unsere Benutzeroberfläche mit der `registerUser`-Aktion zu verbinden.

Datei: components/RegistrationForm.js

'use client'; import { experimental_useFormState as useFormState } from 'react-dom'; import { registerUser, initialState } from '../actions/authActions'; import { SubmitButton } from './SubmitButton'; export function RegistrationForm() { const [state, formAction] = useFormState(registerUser, initialState); return (

Registrieren

{state?.message && !state.errors &&

{state.message}

} {state?.message && state.errors &&

{state.message}

}

Benutzername {state?.errors?.username && (

{state.errors.username[0]}

)}

E-Mail {state?.errors?.email && (

{state.errors.email[0]}

)}

Passwort {state?.errors?.password && (

{state.errors.password[0]}

)}

); }

Diese Komponente ist jetzt deklarativ und sauber. Sie verwaltet keinen Status selbst, abgesehen von dem `state`-Objekt, das von `useFormState` bereitgestellt wird. Ihre einzige Aufgabe ist es, die Benutzeroberfläche basierend auf diesem Status zu rendern. Die Logik zum Deaktivieren der Schaltfläche ist in `SubmitButton` enthalten, und die gesamte Validierungslogik befindet sich in `authActions.js`. Diese Trennung der Verantwortlichkeiten ist ein großer Gewinn für die Wartbarkeit.

Erweiterte Techniken und professionelle Best Practices

Während das grundlegende Muster leistungsstark ist, erfordern reale Anwendungen oft mehr Nuancen. Lassen Sie uns einige erweiterte Techniken untersuchen.

Der hybride Ansatz: Verschmelzung von Sofort- und Nachübermittlungsvalidierung

Die statusbasierte Validierung eignet sich hervorragend für serverseitige Überprüfungen, aber es kann langsam sein, auf einen Netzwerk-Roundtrip zu warten, um einem Benutzer mitzuteilen, dass seine E-Mail ungültig ist. Ein hybrider Ansatz ist oft am besten:

• Verwenden Sie die HTML5-Validierung: Vergessen Sie nicht die Grundlagen! Attribute wie `required`, `type="email"`, `minLength` und `pattern` liefern sofortiges, browser-eigenes Feedback ohne Kosten.
• Leichte clientseitige Validierung: Für rein kosmetische oder Formatierungsüberprüfungen (z. B. Kennwortstärkenanzeige) können Sie weiterhin eine minimale Anzahl von `useState`- und `onChange`-Handlern verwenden.
• Server-Autorität: Behalten Sie die Server-Aktion für die kritischste, geschäftslogische Validierung, die nicht auf dem Client durchgeführt werden kann (z. B. Überprüfen auf eindeutige Benutzernamen, Validieren anhand von Datenbankdatensätzen).

Dies gibt Ihnen das Beste aus beiden Welten: sofortiges Feedback für einfache Fehler und autoritäre Validierung für komplexe Regeln.

Barrierefreiheit (A11y): Formulare für alle erstellen

Barrierefreiheit ist nicht verhandelbar. Beachten Sie bei der Implementierung der statusbasierten Validierung Folgendes:

• Fehler ankündigen: In unserem Beispiel haben wir `aria-live="polite"` für die Fehlermeldungscontainer verwendet. Dadurch werden Screenreader angewiesen, die Fehlermeldung anzukündigen, sobald sie angezeigt wird, ohne den aktuellen Ablauf des Benutzers zu unterbrechen.
• Fehler mit Eingaben verknüpfen: Verwenden Sie für eine robustere Verbindung das Attribut `aria-describedby`. Die Eingabe kann auf die ID ihres Fehlermeldungscontainers verweisen und so eine programmgesteuerte Verknüpfung erstellen.
• Fokus-Management: Ziehen Sie nach einer Übermittlung mit Fehlern in Erwägung, den Fokus programmgesteuert auf das erste ungültige Feld zu verschieben. Dies erspart Benutzern die Suche danach, was schief gelaufen ist.

Optimistische Benutzeroberfläche mit der `data`-Eigenschaft von `useFormStatus`

Stellen Sie sich eine Social-Media-App vor, in der ein Benutzer einen Kommentar postet. Anstatt eine Sekunde lang einen Spinner anzuzeigen, können Sie die App sofort erscheinen lassen. Die `data`-Eigenschaft von `useFormStatus` ist dafür perfekt geeignet.

Wenn das Formular gesendet wird, wird `pending` true und `data` wird mit den `FormData` der Übermittlung gefüllt. Sie können den neuen Kommentar sofort in einem temporären, 'ausstehenden' visuellen Zustand mit diesen `data` rendern. Wenn die Server-Aktion erfolgreich ist, ersetzen Sie den ausstehenden Kommentar durch die endgültigen Daten vom Server. Wenn dies fehlschlägt, können Sie den ausstehenden Kommentar entfernen und einen Fehler anzeigen. Dadurch fühlt sich die Anwendung unglaublich reaktionsschnell an.

Navigieren in den "experimentellen" Gewässern

Es ist entscheidend, das Präfix "experimentell" in `experimental_useFormStatus` und `experimental_useFormState` zu behandeln.

Was "Experimentell" wirklich bedeutet

Wenn React eine API als experimentell kennzeichnet, bedeutet dies:

• Die API kann sich ändern: Der Name, die Argumente oder die Rückgabewerte können in einer zukünftigen React-Version geändert werden, ohne die standardmäßige semantische Versionsverwaltung (SemVer) für Breaking Changes zu befolgen.
• Möglicherweise gibt es Fehler: Als neues Feature kann es Sonderfälle geben, die noch nicht vollständig verstanden oder gelöst wurden.
• Die Dokumentation kann spärlich sein: Während die Kernkonzepte dokumentiert sind, kann sich die detaillierte Anleitung zu erweiterten Mustern noch weiterentwickeln.

Wann man übernehmen und wann man warten soll

Sollten Sie es also in Ihrem Projekt verwenden? Die Antwort hängt von Ihrem Kontext ab:

• Gut für: Persönliche Projekte, interne Tools, Startups oder Teams, die sich mit potenziellen API-Änderungen auskennen. Die Verwendung innerhalb eines Frameworks wie Next.js (das diese Funktionen in seinen App Router integriert hat) ist im Allgemeinen die sicherere Wahl, da das Framework dazu beitragen kann, einen Teil der Turbulenzen zu abstrahieren.
• Mit Vorsicht verwenden für: Groß angelegte Unternehmensanwendungen, unternehmenskritische Systeme oder Projekte mit langfristigen Wartungsverträgen, bei denen die API-Stabilität von größter Bedeutung ist. In diesen Fällen kann es ratsam sein, zu warten, bis die Hooks zu einer stabilen API befördert werden.

Behalten Sie stets den offiziellen React-Blog und die Dokumentation im Auge, um Ankündigungen zur Stabilisierung dieser Hooks zu erhalten.

Fazit: Die Zukunft der Formulare in React

Die Einführung von `experimental_useFormStatus` und seinen zugehörigen APIs ist mehr als nur ein neues Tool; es stellt einen philosophischen Wandel dar, wie wir interaktive Erlebnisse mit React erstellen. Indem wir die Grundlagen der Webplattform nutzen und zustandsbehaftete Logik auf dem Server zusammenlegen, können wir Anwendungen erstellen, die einfacher, widerstandsfähiger und oft leistungsfähiger sind.

Wir haben gesehen, wie `useFormStatus` eine saubere, entkoppelte Möglichkeit für Komponenten bietet, auf den Lebenszyklus einer Formularübermittlung zu reagieren. Es eliminiert das Prop-Drilling für ausstehende Zustände und ermöglicht elegante, in sich geschlossene UI-Komponenten wie eine intelligente `SubmitButton`. In Kombination mit `useFormState` schaltet es das leistungsstarke Muster der statusbasierten Validierung frei, bei dem der Server die ultimative Autorität ist und die Hauptaufgabe des Clients darin besteht, den vom Server-Aktion zurückgegebenen Status zu rendern.

Während das Tag "experimentell" ein gewisses Maß an Vorsicht rechtfertigt, ist die Richtung klar. Die Zukunft der Formulare in React ist eine progressive Verbesserung, vereinfachte Statusverwaltung und eine leistungsstarke, nahtlose Integration zwischen Client- und Serverlogik. Indem Sie diese neuen Hooks heute beherrschen, lernen Sie nicht nur eine neue API; Sie bereiten sich auf die nächste Generation der Webanwendungsentwicklung mit React vor.